<template>
  <div
    class="app-button"
    :style="radius ? 'border-radius: ' + radius : ''"
    :class="[getClass(), getSize()]"
    :disabled="disabled || loading"
    :open-type="openType"
    :form-type="formType"
    @getuserinfo="bindgetUserInfo"
    @click.stop="buttonClick"
  >
    <i v-if="loading" class="el-icon-loading button-icon"></i>
    <i v-if="icon && icon.length" class="button-icon" :class="icon"></i>
    <slot></slot>
  </div>
</template>

<script>
// @params type: 样式类型            primary-主要  success-成功  error-错误  warning-警告
// @params size: 按钮尺寸           可选: larger large middle small smaller mini
// @params font-size: 字体大小      默认: 32
// @params plain: 是否为朴素按钮     默认: false
// @params disabled: 是否为禁用按钮  默认: false
// @params round: 是否为圆角         默认: false
export default {
  props: {
    // 按钮类型，对应不同的颜色
    type: {
      type: String,
      default: () => {
        return 'primary';
      }
    },
    // 按钮表单类型，微信平台使用
    formType: {
      type: String,
      default: () => {
        return '';
      }
    },
    // 按钮权限类型，微信平台使用
    openType: {
      type: String,
      default: () => {
        return '';
      }
    },
    // 按钮尺寸 larger large middle small smaller mini
    size: {
      type: String,
      default: 'middle'
    },
    // 是否是朴素按钮，即白色背景，文字颜色和边框颜色与type一致
    plain: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    // 按钮是否禁用，如按钮禁用，颜色为禁用颜色，同时用户不可点击
    disabled: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    // 是否是超链接按钮，超链接按钮则为文本超链接形式
    link: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    // 按钮文本是否有下划线，只有当按钮为超链接按钮时（link = true），该属性才生效
    underline: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    // 按钮是否在加载
    loading: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    // 按钮是否有圆角，默认圆角为10rpx
    round: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    // 圆角大小
    radius: {
      type: String,
      default: () => {
        return '';
      }
    },
    // 按钮跳转路径
    path: {
      type: String,
      default: () => {
        return '';
      }
    },
    // 按钮svg图标
    icon: {
      type: String,
      default: () => {
        return '';
      }
    }
  },
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {
    bindgetUserInfo({ detail = {} } = {}) {
      this.$emit('getuserinfo', detail);
    },
    buttonClick() {
      if (this.disabled || this.loading) {
        return false;
      }
      this.$emit('click');
    },
    getClass() {
      const className = [];
      let t = '';
      if (this.link) {
        t = `app-${this.type}-link link-button`;
        if (this.underline) {
          t += ' underline';
        }
      } else {
        t = `app-${this.type}-button`;
      }
      className.push(t);
      if (this.plain) {
        className.push('plain');
      }
      if (this.disabled || this.loading) {
        className.push('disabled');
      }
      if (this.round) {
        className.push('round');
      }
      return className.join(' ');
    },
    getSize() {
      return `app-button-${this.size}`;
    }
  }
};
</script>

<style lang="scss"
       scoped>
@import 'app-button.scss';
.button-icon {
  margin-right: 5px;
}

.link-button {
  padding: 0 !important;
}
</style>
